<template>
  <div class="demo">
    <div class="demo-title">后缀图标</div>
    <div class="demo-content">
      <Space>
        <Select
          v-model:value="value1"
          style="width: 120px"
          :options="options1"
          @change="handleChange"
        >
          <template #suffixIcon><SmileOutlined /></template>
        </Select>
        <Select v-model:value="value2" style="width: 120px" disabled :options="options2">
          <template #suffixIcon><MehOutlined /></template>
        </Select>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { SmileOutlined, MehOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const value1 = ref('lucy');
  const value2 = ref('lucy');
  const options1 = ref<SelectProps['options']>([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'disabled', label: 'Disabled', disabled: true },
    { value: 'yiminghe', label: 'Yiminghe' },
  ]);
  const options2 = ref<SelectProps['options']>([{ value: 'lucy', label: 'Lucy' }]);
  const handleChange = (val) => console.log(`selected ${val}`);
</script>
